<template>
	<view class="balance-container page-container">

		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-header">
				<text class="balance-title">账户余额</text>
				<view class="balance-actions">
					<u-icon name="eye" size="20" color="#ffffff" @click="toggleBalanceVisible"></u-icon>
				</view>
			</view>
			<view class="balance-amount">
				<text class="balance-symbol">¥</text>
				<text class="balance-value" v-if="balanceVisible">{{ userBalance }}</text>
				<text class="balance-hidden" v-else>****</text>
			</view>
			<view class="balance-footer">
				<button class="recharge-btn" @click="toRecharge">充值</button>
				<button class="withdraw-btn" @click="toWithdraw">提现</button>
			</view>
		</view>

		<!-- 快捷操作 -->
		<view class="quick-actions">
			<view class="action-item" @click="toRecharge">
				<view class="action-icon">
					<u-icon name="plus-circle" size="32" color="#1c705e"></u-icon>
				</view>
				<text class="action-text">充值</text>
			</view>
			<view class="action-item" @click="toWithdraw">
				<view class="action-icon">
					<u-icon name="minus-circle" size="32" color="#ff4757"></u-icon>
				</view>
				<text class="action-text">提现</text>
			</view>
			<view class="action-item" @click="toTransfer">
				<view class="action-icon">
					<u-icon name="share" size="32" color="#ffa500"></u-icon>
				</view>
				<text class="action-text">转账</text>
			</view>
			<view class="action-item" @click="toRecord">
				<view class="action-icon">
					<u-icon name="list" size="32" color="#007aff"></u-icon>
				</view>
				<text class="action-text">明细</text>
			</view>
		</view>

		<!-- 交易记录 -->
		<view class="record-section">
			<view class="section-header">
				<text class="section-title">最近交易</text>
				<text class="more-text" @click="toRecord">查看全部</text>
			</view>
			<view class="record-list" v-if="recentRecords.length > 0">
				<view class="record-item" v-for="(item, index) in recentRecords" :key="index">
					<view class="record-left">
						<view class="record-icon" :class="'icon-' + ([1,3,6].includes(item.type) ?'income':'expense')">
							<u-icon :name="getRecordIcon([1,3,6].includes(item.type) ?'income':'expense')" size="20"
								color="#ffffff"></u-icon>
						</view>
						<view class="record-info">
							<text class="record-title">{{ item.event_data }}</text>
							<text class="record-time">{{ item.event_time }}</text>
						</view>
					</view>
					<view class="record-right">
						<text class="record-amount"
							:class="'amount-' + ([1,3,6].includes(item.type) ?'income':'expense')">
							{{ [1,3,6].includes(item.type) ? '+' : '-' }}¥{{ item.change_amount }}
						</text>
						<text class="record-status"
							:class="'status-' + (item.sync_status===1?'completed':'processing')">{{ getStatusText(item.sync_status) }}</text>
					</view>
				</view>
			</view>
			<view class="empty-state" v-else>
				<image src="@/static/images/cart-green.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">暂无交易记录</text>
			</view>
		</view>

		<!-- 余额说明 -->
		<view class="info-section">
			<view class="section-title">
				<text class="title-text">余额说明</text>
			</view>
			<view class="info-content">
				<view class="info-item" v-for="(item, index) in balanceInfo" :key="index">
					<view class="info-icon">
						<u-icon :name="item.icon" size="20" color="#1c705e"></u-icon>
					</view>
					<text class="info-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				balanceVisible: true,
				userBalance: '0.00',
				// 最近交易记录
				recentRecords: [],
				// 余额说明
				balanceInfo: [{
						icon: 'shield',
						text: '余额资金由银行监管，安全有保障'
					},
					{
						icon: 'clock',
						text: '充值实时到账，提现1-3个工作日到账'
					},
					{
						icon: 'gift',
						text: '余额支付享受专属优惠和积分奖励'
					},
					{
						icon: 'checkmark-circle',
						text: '支持银行卡、微信、支付宝等多种充值方式'
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onLoad() {

		},
		onShow() {
			this.loadAccountInfo();
			this.loadBalanceList();
		},
		methods: {
			// 查询账户信息
			loadAccountInfo() {
				this.$api.user.GetAccountInfo().then(res => {
					if (res.data && res.data.balance) {
						this.userBalance = res.data.balance
					}
				})
			},

			// 余额变动明细
			loadBalanceList() {
				this.$api.user.GetBalanceList({
					page: 1,
					limit: 50
				}).then(res => {
					this.recentRecords = res.data
				})
			},

			// 切换余额显示/隐藏
			toggleBalanceVisible() {
				this.balanceVisible = !this.balanceVisible
			},

			// 跳转到充值页面
			toRecharge() {
				uni.navigateTo({
					url: '/pages/payment/recharge'
				})
			},

			// 跳转到提现页面
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/payment/withdraw'
				})
			},

			// 跳转到转账页面
			toTransfer() {
				uni.navigateTo({
					url: '/pages/payment/transfer'
				})
			},

			// 跳转到交易记录页面
			toRecord() {
				uni.navigateTo({
					url: '/pages/user/balance-record'
				})
			},

			// 获取记录图标
			getRecordIcon(type) {
				const iconMap = {
					'income': 'arrow-down',
					'expense': 'arrow-up'
				}
				return iconMap[type] || 'list'
			},

			// 获取记录图标样式类
			getRecordIconClass(type) {
				return `record-icon-${type}`
			},

			// 获取金额样式类
			getAmountClass(type) {
				return `amount-${type}`
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					1: '已完成',
					0: '处理中',
					2: '失败'
				}
				return statusMap[status] || '未知'
			},

			// 获取状态样式类
			getStatusClass(status) {
				return `status-${status}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.balance-card {
		background: linear-gradient(135deg, #1c705e 0%, #2d8a6e 100%);
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		color: #ffffff;
	}

	.balance-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.balance-title {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.balance-amount {
		display: flex;
		align-items: baseline;
		margin-bottom: 40rpx;
	}

	.balance-symbol {
		font-size: 32rpx;
		margin-right: 8rpx;
	}

	.balance-value {
		font-size: 56rpx;
		font-weight: bold;
	}

	.balance-hidden {
		font-size: 56rpx;
		font-weight: bold;
	}

	.balance-footer {
		display: flex;
		justify-content: space-between;
	}

	.recharge-btn,
	.withdraw-btn {
		flex: 1;
		background-color: rgba(255, 255, 255, 0.2);
		color: #ffffff;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}

	.recharge-btn:first-child,
	.withdraw-btn:last-child {
		margin: 0;
	}

	.quick-actions {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		justify-content: space-around;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		margin-bottom: 16rpx;
	}

	.action-text {
		font-size: 24rpx;
		color: #333;
	}

	.record-section,
	.info-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.more-text {
		font-size: 26rpx;
		color: #999;
	}

	.record-list {
		margin-top: 20rpx;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.record-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.record-icon-income {
		background-color: #34c759;
	}

	.record-icon-expense {
		background-color: #ff4757;
	}

	.record-info {
		flex: 1;
	}

	.record-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.record-right {
		text-align: right;
	}

	.record-amount {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: block;
	}

	.amount-income {
		color: #34c759;
	}

	.amount-expense {
		color: #ff4757;
	}

	.record-status {
		font-size: 24rpx;
		display: block;
	}

	.status-completed {
		color: #34c759;
	}

	.status-processing {
		color: #ffa500;
	}

	.status-failed {
		color: #ff4757;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.info-content {
		margin-top: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-icon {
		margin-right: 16rpx;
	}

	.info-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
</style>